<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数字自动放大</title>
</head>
<body>
<div id="app">
    <h1>当前 number 的数值是：{{ number }}</h1>
    <!--  实现方式1：直接乘以 10  -->
<!--    <h2>放大 10 倍后的值是：<span v-text="number * 10"></span></h2>-->
    <!--  实现方式2：利用计算属性计算 number 的倍数  -->
    <!--  实现方式3：利用侦听器计算 number 的倍数  -->
    <!--  实现方式4：利用自定义指令  -->
    <h2>放大 10 倍后的值是：<span v-multiple="number"></span></h2>

    <button @click="--number">-1</button>
    <button @click="++number">+1</button>
</div>

<script !src="" type="module">
    import {createApp, ref} from "../../../../js/vue.esm-browser.js";

    let app = createApp({
        setup() {
            let number = ref(1)
            return {
                number
            }
        },

        directives:{
            // 按照生命周期钩子函数写，代码功能没有问题。缺点就是重复太高！
            /*"multiple": {
                // 在挂载的时候调用一次
                mounted(el, binding){
                    el.innerText = binding.value * 10
                },
                // 当数据更新完成的时候，调用一次
                updated(el, binding){
                    el.innerText = binding.value * 10
                }
            }*/

            // 在生命周期的任何阶段，都执行相同的代码
            multiple(el, binding) {
                el.innerText = binding.value * 10
            }
        }
    })

    app.mount("#app")
</script>
</body>
</html>